<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-color: #f00;
        }

        .a {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: #ff0;
        }

        .a1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: #000;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a"></div>
        <div class="a1"></div>
    </div>

    <script>

        // 事件流：页面接受事件的顺序

        // IE  支持事件由内向外 --- 事件冒泡
        // 网景  支持事件由外向内 ---  事件捕获

        // 最终  主流浏览器同时支持冒泡流和捕获流  --- 默认支持事件冒泡


        // 事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段




        var oBox = document.querySelector('.box');
        var oA = document.querySelector('.a');

        var oA1 = document.querySelector('.a1');



        // 事件委托
        //    需要给a和a1都绑定事件  --- 这个两个事件都会触发box的是点击事件  --- 委托给box绑定事件

        oBox.onclick = function (e) {
            // console.log(666);  
            // console.log(e.target);    // 需要判断目标源   e.target / e.srcElement
            // console.log(this);   // this在事件处理函数中，始终指向事件源

            // 
            if (e.target.className === 'a') {
                console.log(1);
            }

            else if (e.srcElement.className === 'a1') {
                console.log(2);
            }
        }





    </script>

</body>

</html>